<template>
	<Appearance :item="item" class="container">
		<scroll-view scroll-x="true" show-scrollbar class="category">
			<view
				class="category-item"
				:class="{active: category_id == item.category_id}"
				v-for="item in categoryList"
				@click="onChoiceCategory(item.category_id)" >
				{{item.name}}
			</view>
		</scroll-view>
		<view class="goods-content">
			<Multiple class="goods-item" v-for="goods in goodsList" :data="goods" is-detail />
		</view>
		<view class="prompt-text">{{ promptText }}</view>
	</Appearance>
</template>

<script>
	import category from '@/api/category'
	import goods from '@/api/goods'
	import Multiple from '@/components/page/diyComponents/goods/multiple.vue'
	import mixin from '../mixin'
	export default {
		data () {
			return {
				category_id: "",
				categoryList: [{name: '全部分类', category_id: 0}],
				goodsList: [],
				promptText: '~ 正在加载中 ~'
			}
		},
		mixins: [mixin],
		components: { Multiple },
		created () {
			category.list().then(result => {
				this.categoryList = this.categoryList.concat(result.data.list)
				this.category_id = this.categoryList[0].category_id
			})
		},
		methods: {
			onChoiceCategory (category_id) {
				this.category_id = category_id
			},
			getGoodsListByCategoryId (categoryId) {
				this.promptText = "~ 正在加载中 ~"
				goods.list({
					page: 1,
					listType: 'all',
					categoryId,
				}).then(result => {
					this.goodsList = result.data.list.data
					this.promptText = this.goodsList.length ?  "~ 已经到底了 ~" : "~ 暂无更多数据 ~"
				})
			}
		},
		watch: {
			category_id(id) {
				this.getGoodsListByCategoryId(id)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {

	}
	.category {
		width: 100%;
		white-space: nowrap;
	}
	.category-item {
		position: relative;
		margin: 0 32rpx;
		padding: 32rpx 16rpx;
		display: inline-block;
		font-size: 34rpx;
		font-weight: bold;
		line-height: 36rpx;
		color: #333333;
		&.active {
			color: #FF8A1F;
			&::after {
				content: "";
				position: absolute;
				left: 50%;
				bottom: 0;
				width: 32rpx;
				height: 8rpx;
				border-radius: 4rpx;
				background: #FF8A1F;
				transform: translateX(-50%);
			}
		}
	}
	.goods-content {
		padding: 32rpx 0;
		display: flex;
		gap: 10rpx;
		flex-wrap: wrap;
	}
	.goods-item {
		width: calc(50% - 5rpx);
		// flex: 1 0.4 50%;
	}
	.prompt-text {
		padding: 48rpx 0;
		font-size: 28rpx;
		line-height: 36rpx;
		text-align: center;
		color: #AAAAAA;
	}
</style>